<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link href="../images/auto_switch_logo.png" rel="icon">
    <link href="style_text/public_style.css" rel="stylesheet">
    <script src="../javascript_text/capture_replacement.js"></script>
    <script src="../javascript_text/comm_js.js"></script>
    <title>自动转换</title>
</head>
<body>
<div class="outer">
    <!-- 菜单栏开始 -->
    <div class="menu" id="navbar"></div>
    <!-- 菜单栏结束 -->
    <div class="space"></div>
    <!-- 工作栏开始 -->
    <div class="comm-taskbar-outer">
        <div class="comm-file-upload-inner">
            <input accept="image/*" id="file-upload" name="pdfUpload" type="file"/>
            <label class="custom-file-upload" data-action="select" for="file-upload" id="file-upload-label">
                选择文件
            </label>
            <div class="file-upload-text" id="file-upload-text">请上传需要转换的文件</div>
            <div class="hint">
                <span class="file-upload-text">想要批量选择</span>
                <div class="info-circle" data-modal="bulk-selection-modal">?</div>
            </div>
        </div>
        <script>captureReplacement()</script>
        <div class="space"></div>
        <div>
            <form>
                <fieldset>
                    <legend>转换后PDF文件名</legend>
                    <div class="radio-container">
                        <input id="customize-name"
                               name="name-mode" type="radio" value="customize-name" aria-label="choose">
                        <input type="text" class="input-box-settings"
                               id="itp-customize-name"
                               name="itp-customize-name"
                               onblur="resetToDefaultValueForText('itp-customize-name', '自定义名称', this)"
                               onclick="selectedTextInput('itp-customize-name',this)"
                               placeholder="请输入自定义名称" value="自定义名称">
                        <label for="itp-customize-name"></label>
                    </div>

                    <div class="radio-container">
                        <input checked id="date" name="name-mode" type="radio" value="date">
                        <label for="date">当前时间</label>
                    </div>
                </fieldset>
            </form>
            <form>
                <fieldset>
                    <section class="itp-nested-fieldset">
                        <span class="legend-span">mask遮罩</span>
                        <div class="info-circle" data-modal="mask-modal">?</div>
                    </section>
                    <div class="radio-container">
                        <input checked id="mask-mode-auto" name="mask-mode" type="radio" value="mask-mode-auto">
                        <label for="mask-mode-auto">自动</label>
                    </div>
                    <div class="radio-container">
                        <input id="mask-mode-true" name="mask-mode" type="radio" value="mask-mode-true">
                        <label for="mask-mode-true">开</label>
                    </div>
                    <div class="radio-container">
                        <input id="mask-mode-false" name="mask-mode" type="radio" value="mask-mode-false">
                        <label for="mask-mode-false">关</label>
                    </div>
                </fieldset>
            </form>
            <div class="modal" id="bulk-selection-modal">
                <div class="modal-content">
                    <span class="comm-modal-title">暂时不支持批量选择</span><br><br>
                    <span class="close" data-modal="bulk-selection-modal">知道了</span>
                </div>
            </div>
            <div class="modal" id="cancel-modal">
                <div class="modal-content">
                    <span class="comm-modal-title">确定要取消选择文件吗？</span><br><br>
                    <span>您选择的所有文件将被取消</span><br><br><br>
                    <button class="button-style1" id="confirm-cancel">确定</button>
                    <br>
                    <button class="button-style1" id="cancel-cancel">取消</button>
                </div>
            </div>
            <div class="modal" id="mask-modal">
                <div class="modal-content">
                    <span class="comm-modal-title">关于mask遮罩</span><br><br>
                    <span>mask参数的作用是控制图像的透明区域如何处理, mask可以设置为以下几种值:</span><br>
                    <span><strong>自动</strong>: 自动处理遮罩, 适用于支持透明度的图, 通常会保留透明部分</span><br>
                    <span><strong>开</strong>: 使用图像的透明通道作为遮罩, 显示透明部分</span><br>
                    <span><strong>关</strong>: 不使用遮罩, 显示整个图像</span><br><br><br>
                    <span class="close" data-modal="mask-modal">知道了</span>
                </div>
            </div>
            <form>
                <div>
                    <button class="button-style1" type="button">开始转换</button>
                </div>
                <br><br>
                <div>
                    <button class="button-style1" type="button">下载转换好的文件</button>
                </div>
            </form>
        </div>
    </div>
    <!-- 工作栏结束 -->
    <div class="space3"></div>
</div>
<div class="about">
    <img alt="加载失败" class="about-img" height="60" src="../images/auto_switch_logo.png">
    <span>
        Auto Switch
    </span>
</div>
</body>
</html>